/** 允许上传的文件类型 */
const ALLOW_FILE_TYPE = [".png", ".jpg", '.jpeg'],
    /** 允许上传的文件大小 单位MB */
    MAX_FILE_SIZE = 20 * 1024 * 1024;

/**
 * 处理上传的文件校验与回显
 * @param {FileList} files
 * @returns
 */
export default function fileHandler(files, canvas, ctx, callback) {
    let file = files[0]; // 只取一张图片

    if (file == null || file == "") {
        // alert("请选择要上传的文件!");
        return false;
    }

    // 验证文件类型是否符合要求
    let extName = file.name.substring(file.name.lastIndexOf("."));
    if (!ALLOW_FILE_TYPE.includes(extName)) {
        let errMsg = "不支持的格式，请上传" + ALLOW_FILE_TYPE.join('，') + "类型的文件,当前文件类型为：" + extName;
        alert(errMsg);
        return;
    }

    // 验证文件大小是否符合要求
    if (file.size > MAX_FILE_SIZE) {
        alert(`文件过大(需≤${Utils.formatBytes(MAX_FILE_SIZE)})`);
        return;
    }

    // 验证通过开始解析文件
    const reader = new FileReader();

    reader.onloadend = function () {
        callback && callback(canvas);

        const img = new Image();
        img.src = reader.result;

        img.onload = function () {
            // 计算缩放比例
            const canvasWidth = canvas.getBoundingClientRect().width;
            const scale = canvasWidth / img.width;

            // 计算缩放后的高度，保持宽高比
            const scaledHeight = img.height * scale;

            // 设置canvas的尺寸以匹配缩放后的图片
            canvas.width = canvasWidth;
            canvas.height = scaledHeight;

            // 绘制缩放后的图片到canvas上
            ctx.drawImage(img, 0, 0, canvasWidth, scaledHeight);
        }
    }

    reader.readAsDataURL(file);

    document.querySelector('#upload').value = '';
}
